;(function (w) {
  var pageComponent = Vue.extend({
    template: '<div class="hl-turn-page">'
      +'<ul class="dy-flex line-height-34">'
        +'<li class="frist cursor mr-5" @click="(current = 1) && change(current)">首页</li>'
        +'<li class="prev cursor mr-5" @click="(current > 1 && current--) && change(current--)">上一页</li>'
        +'<li class="mr-5 cursor" :class="{page:true, active:current == item}" v-for="(item, index) in pages" @click="change(item)">{{item}}</li>'
        +'<li class="next cursor mr-5" @click="(current < pagetotal && current++) &&　change(current++)">下一页</li>'
        +'<li class="last cursor mr-5" @click="(current = pagetotal) && change(current)">尾页</li>'
      +'</ul>'
    +'</div>',
    props: {
      total: {
        type: Number,
        default: 0
      },
      displayNum: {
        type: Number,
        default: 5
      }
    },
    data: function () {
      return {
        pagetotal: this.total,
        current: 1,
        showItem: this.displayNum
      }
    },
    computed: {
      pages: function() {
        var page = [];
        if (this.current < this.showItem) {
          var i = Math.min(this.showItem, this.pagetotal);
          while (i) {
            page.unshift(i--);
          }
        } else {
          var middle = this.current - Math.floor(this.showItem / 2),
            i = this.showItem;
          if (middle > (this.pagetotal - this.showItem)) {
            middle = (this.pagetotal - this.showItem) + 1
          }
          while (i--) {
            page.push(middle++);
          }
        }
        return page
      }
    },
    watch: {
      total: function(val) {
        this.pagetotal = val;
      }
    },
    methods: {
      change: function(nums) {
        this.current = nums;
        this.$emit('change', this.current)
      }
    },
		mounted () {
			this.showItem = this.displayNum
		}
  })

  Vue.component('hl-page', pageComponent);
}(window))
